<template>
  <div class="overallProgress-main guanwang-bg" style="height: calc(100vh - 124px);border-radius: 10px">
    <div :style="{paddingTop:100 * (10 / screensStore.bodyHeight) + 'vh',
    paddingLeft:100 * (10 / screensStore.bodyWidth) + 'vw',paddingRight:100 * (10 / screensStore.bodyWidth) + 'vw',
    marginBottom:100 * (10 / screensStore.bodyHeight) + 'vh'}"
         v-if="isEmpty">
      <div class="title-desp">{{ screensStore.selPeriodObj.periodName }}</div>

      <div style="margin-top: 20px">
        <div>
          <el-tag type="primary" effect="dark" round>整体进度</el-tag>
          <div class="row" style="margin-top: 10px">
            <el-row :gutter="20" justify="space-between">
              <el-col :span="3">
                <div style="width: 100%;height: 80px;background: linear-gradient(260deg,
    #eae6e6 0%,
    #99c2ff 100%);" class="overall_progress">
                  <div style="font-weight: 600;font-size: 14px">本期网点</div>
                  <div style="align-self: center;font-weight: 800;font-size: 24px">{{overallProgress?.total || 0}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="width: 100%;height: 80px;background: linear-gradient(260deg,
    #eae6e6 0%,
    #51e85e 100%);" class="overall_progress">
                  <div style="font-weight: 600;font-size: 14px">已排班</div>
                  <div style="align-self: center;font-weight: 800;font-size: 24px">{{overallProgress?.ypb || 0}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="width: 100%;height: 80px;background: linear-gradient(260deg,
    #eae6e6 0%,
    #43dacd 100%);" class="overall_progress">
                  <div style="font-weight: 600;font-size: 14px">已采集</div>
                  <div style="align-self: center;font-weight: 800;font-size: 24px">{{overallProgress?.ycj || 0}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="width: 100%;height: 80px;background: linear-gradient(260deg,
    #eae6e6 0%,
    #e58a15 100%);" class="overall_progress">
                  <div style="font-weight: 600;font-size: 14px">审核中</div>
                  <div style="align-self: center;font-weight: 800;font-size: 24px">{{overallProgress?.shz || 0}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="width: 100%;height: 80px;background: linear-gradient(260deg,
    #eae6e6 0%,
    #e81111 100%);" class="overall_progress">
                  <div style="font-weight: 600;font-size: 14px">申诉中</div>
                  <div style="align-self: center;font-weight: 800;font-size: 24px">{{overallProgress?.ssz || 0}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="width: 100%;height: 80px;background: linear-gradient(260deg,
    #eae6e6 0%,
    #0bea16 100%);" class="overall_progress">
                  <div style="font-weight: 600;font-size: 14px">已完成</div>
                  <div style="align-self: center;font-weight: 800;font-size: 24px">{{overallProgress?.ywc || 0}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="width: 100%;height: 80px;background: linear-gradient(260deg,
    #eae6e6 0%,
    #420ce0 100%);" class="overall_progress">
                  <div style="font-weight: 600;font-size: 14px">当前平均分</div>
                  <div style="align-self: center;font-weight: 800;font-size: 24px">{{overallProgress?.avg || 0}}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-divider />
        <div>
          <div
            style="box-shadow: var(--el-border-color-light) 0px 0px 10px"
          >
            <el-splitter>
              <el-splitter-panel size="50%">
                <div class="demo-panel">
                  <el-tag type="primary" effect="dark" round>高分top排行</el-tag>
                  <el-table :data="maxSourceTableData" style="width: 100%;margin-top: 10px" border  :header-cell-style="{ background: 'rgb(250,250,250)'}">
                    <el-table-column prop="date" label="排名" align="center" width="120px">
                      <template #default="scope">
                        <div style="display: flex;justify-content: center">
                          <div style="width: 25px;height: 25px;line-height: 25px;text-align: center;border-radius: 50%;
                      background: #409EFF;color: #fff;">{{scope.$index + 1}}</div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="outletsName" label="名称" align="center" />
                    <el-table-column prop="score" label="分数" align="center" width="120px"/>
                  </el-table>
                </div>
              </el-splitter-panel>
              <el-splitter-panel size="50%">
                <div class="demo-panel">
                  <el-tag type="primary" effect="dark" round>低分top排行</el-tag>
                  <el-table :data="minSourceTableData" style="width: 100%;margin-top: 10px" border  :header-cell-style="{ background: 'rgb(250,250,250)'}">
                    <el-table-column prop="date" label="排名" align="center" width="120px">
                      <template #default="scope">
                        <div style="display: flex;justify-content: center">
                          <div style="width: 25px;height: 25px;line-height: 25px;text-align: center;border-radius: 50%;
                      background: #F56C6C;color: #fff;">{{scope.$index + 1}}</div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="outletsName" label="名称" align="center" />
                    <el-table-column prop="score" label="分数" align="center" width="120px"/>
                  </el-table>
                </div>
              </el-splitter-panel>
            </el-splitter>
          </div>
        </div>
        <el-divider />
        <div style="width: 100%">
          <el-tag type="primary" effect="dark" round>申诉情况</el-tag>
          <div style="margin-top: 10px;width: 100%">
            <div id="appealSituation" style="width: 100%;height: 400px"></div>
          </div>
        </div>
        <el-divider />
        <div>
          <el-tag type="primary" effect="dark" round>进度查询</el-tag>
          <div style="margin-top: 10px" class="progress-table">
            <div>
              <el-form :model="progressSearchData" inline label-position="right" label-width="80px">
                <el-form-item label="层级">
                  <el-select v-model="progressSearchData.level" clearable placeholder="请选择层级"
                             filterable style="width: 300px">
                    <el-option v-for="item in prentSearchWangList" :label="item.outletsName" :value="item.id"
                               :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称">
                  <el-input placeholder="请输入名称" style="width: 300px" v-model="progressSearchData.outletsName"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchProgress"><el-icon><Search /></el-icon>查询</el-button>
                  <el-button @click="clearSearch"><el-icon><Refresh /></el-icon>重置</el-button>
                  <el-button @click="onExportData"><el-icon><Promotion /></el-icon>导出</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-top: 10px">
              <el-table :data="progressTableData" style="width: 100%" border  :header-cell-style="{ background: 'rgb(250,250,250)'}">
                <el-table-column label="序号" type="index" :index="indexMethod" width="80px" align="center"/>
                <el-table-column prop="name" label="名称" align="center" />
                <el-table-column prop="zyb" label="总样本" align="center"/>
                <el-table-column prop="ypb" label="已排班" align="center"/>
                <el-table-column prop="ycj" label="已采集" align="center"/>
                <el-table-column prop="shz" label="审核中" align="center"/>
                <el-table-column prop="ssz" label="申诉中" align="center"/>
                <el-table-column prop="ywc" label="已完成" align="center"/>
                <el-table-column prop="avg" label="平均分" align="center"/>
              </el-table>
              <div class="fixed-row" style="width: 100%;justify-content: center;margin-top: 10px">
                <el-pagination background layout="sizes,prev,pager,next,jumper,total" :total="paging.total"
                               @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 80px"></div>
    </div>
    <div v-else style="width: 100%;height: 100%">
      <el-empty description="请先选择期次">
        <el-button type="primary" @click="toIssueselect">选择期次</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
  import * as echarts from "echarts";
  import { screenStore } from '~/stores/modules/screen'
  import { ref, onMounted } from 'vue'
  import { useRoute,useRouter } from 'vue-router'
  import {getOverallProgress,totalPaiData,shensuQing,getProgressList,exportDataInfo,getTableCengList} from '~/api/overallProgress'
  import { saveAs } from 'file-saver'
  let echart = echarts;
  let periodId = ''
  let chart = null
  const route = useRoute()
  const router = useRouter()
  const isEmpty = ref(false)
  const maxSourceTableData = ref([])
  const minSourceTableData = ref([])
  const progressTableData = ref([])
  const prentSearchWangList = ref([])
  const barOptions = reactive({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      left:'left'
    },
    xAxis: {
      type: 'category',
      data: ['上一期','本期']
    },
    yAxis: {
      type: 'value'
    },
    toolbox:{
      show:true,
      feature: {
        saveAsImage: {},  // 导出图片
        magicType: {show: true, type: ['line', 'bar']},
      }
    },
    series: [
      {
        name: '申诉数',
        data: [],
        type: 'bar',
        itemStyle:{
          color:'#67C23A'
        },
        barMaxWidth:'40px'
      },
      {

        name: '申诉成功数',
        type: 'bar',
        data: [],
        itemStyle:{
          color:'#E6A23C'
        },
        barMaxWidth:'40px'
      },
    ]
  })
  const overallProgress = reactive({
    outletsName:'',
    level:'',
  })
  const screensStore = screenStore()
  const paging = reactive({
    currentPage:1,
    total:0,
    pageSize:10
  })
  const progressSearchData = reactive({})
  onMounted(() => {
    if (route.query.periodId) {
      isEmpty.value = true
      periodId = route.query.periodId
      // 整体进度
      getOverallProgress(periodId).then(res => {
        if(res.code == 200){
          Object.assign(overallProgress,{
            ...res.data
          })
        }
      })

      // top排行
      totalPaiData(periodId).then(res => {
        if(res.code == 200){
          maxSourceTableData.value = res.data.desc
          minSourceTableData.value = res.data.asc
        }
        else{
          maxSourceTableData.value = []
          minSourceTableData.value = []
        }
      })

      // 申诉情况
      shensuQing(periodId).then(res => {
        if(res.code == 200){
          barOptions.series[0].data = []
          barOptions.series[1].data = []
          if(res.data.last){
            barOptions.series[0].data.push(res.data.last.total)
            barOptions.series[1].data.push(res.data.last.success)
          }
          else{
            barOptions.series[0].data.push(0)
            barOptions.series[1].data.push(0)
          }
          if(res.data.current){
            barOptions.series[0].data.push(res.data.current.total)
            barOptions.series[1].data.push(res.data.current.success)
          }
          else{
            barOptions.series[0].data.push(0)
            barOptions.series[1].data.push(0)
          }
        }
        nextTick(()=>{
          chart = echart.init(document.getElementById('appealSituation'))
          setTimeout(()=>{
            chart.setOption(barOptions)
          },1000)
        })
      })
      getTableList()
      getTableCengList().then(res => {
        if(res.code == 200){
          if(res.data.records.length){
            res.data.records.splice(0,0,{
              outletsName:'全部',
              id:"全部"
            })
            prentSearchWangList.value = res.data.records
          }
          else{
            prentSearchWangList.value = []
          }
        }
        else{
          prentSearchWangList.value = []
        }
      })
    } else {
      isEmpty.value = false
    }
  })

  function toIssueselect() {
    screensStore.activeHomeNav = '期次选择'
    router.replace({ path: '/issueselect' })
  }
  function indexMethod(index: number) {
    return (paging.currentPage - 1) * paging.pageSize + index + 1
  }
  function handleSizeChange(val){
    paging.pageSize = val
    getTableList()
  }
  function handleCurrentChange(val){
    paging.currentPage = val
    getTableList()
  }
  function searchProgress(){
    paging.currentPage = 1
    getTableList()
  }

  function clearSearch(){
    Object.assign(progressSearchData,{
      outletsName:'',
      level:'',
    })
    paging.currentPage = 1
    getTableList()
  }
  function onExportData(){
    const params = {
      ...progressSearchData,
      periodId,
    }
    exportDataInfo(params).then(res => {
      ElMessage.success( '进度信息导出成功')
      saveAs(res,'进度信息')
    })
  }
  function getTableList(){
    const params = {
      current:paging.currentPage,
      size:paging.pageSize,
      periodId:periodId,
      ...progressSearchData
    }
    getProgressList(params).then(res => {
      if(res.code == 200){
        progressTableData.value = res.data.records
        paging.total = res.data.total * 1
      }
      else{
        progressTableData.value = []
        paging.total = 0
      }
    })
  }
</script>

<style scoped lang="less">
  .title-desp {
    font-size: 18px;
    color: #666;
    font-weight: 700;
  }

  .overall_progress {
    border-radius: 10px;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    color: #fff;
  }
  .demo-panel{
    padding: 5px 10px;
  }
</style>
